<template>
	<view class="info">
		<view class="box">
		</view>
		<view class="input">
			<input placeholder="随机角色名字" type="text" v-model="userName"/>
			<button @tap="rad" type="primary">随机</button>
		</view>
		<view class="start">
			<button @tap="start">开始游戏</button>
		</view>
	</view>
</template>

<script>
	import {name} from '../../static/nameText/name.js'
	import {transStr} from '../../commonjs/utils.js'
	export default {
		data() {
			return {
				userName: ""
			}
		},
		methods: {
			text () {
				let text = name
				let index = Math.round(Math.random()*text.length)
				let res = text.slice(index, index+1)
				return res
			},
			rad () {
				let str = ""
				for(let i=0;i<Math.round(2+Math.random()*5);i++) {
					str = str + this.text()
				}
				this.userName = str
			},
			start () {
				let reg = /^[\u4e00-\u9fa5]+$/g
				console.log(this.userName)
				if (reg.test(this.userName)) {
					uni.navigateTo({
						url: '/pages/index/index?' + transStr({name:this.userName,type:'b'})
					})
				} else {
					uni.showToast({
						title: '角色名必须中文',
						duration: 1000
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.info {
		.box {
			height: 800rpx;
			background-image: url(../../static/img/user.png) ;
			background-size: 100% 100% ;
			background-repeat: no-repeat;
			
		}
		.input {
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			input {
				color: #000000;
				text-align: center;
				white-space: pre-wrap;
				margin-left: 28%;
				border: 1px solid #007AFF;
				width: 30%;
				height: 84rpx;
				background-image: url(../../static/img/bg.png) ;
			}
			button {
				margin-left: 10rpx;
				background-image: url(../../static/img/bg.png) ;
			}
		}
		.start {
			display: flex;
			margin: 40rpx;
		}
	}
</style>
